
import React, { Component } from 'react';
import { mathroundFn } from "../utils/public";
import { init, clearIntervalFn } from './module';
import './view.scss';
var $ = window.$ = require("jquery")

class CircleContent extends Component {
    render() {
        let { data } = this.props;
        data = data || [{ value: 0 }, { value: 0 }, { value: 0 }, { value: 0 }]
        return <div className="CircleContent">
            <div className="main-content">
                <div>
                    {mathroundFn(data[0].value)}
                </div>
                <label>{data[0].text}</label>
            </div>
        </div>
    }
}

const CircleCenterBackgroundFn = () => {
    return (
        <div className="rotate-all">
            <div className="rotate-out">
            </div>
            <div className="rotate-in">
            </div>
        </div>
    )
}
//－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
//页面
//－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
class CircleLoop extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],

        }
        this.onchange = this.onchange.bind(this);
    }
    onchange(val) {
        var body = document.getElementById('AnalyticCenterMap');
        // body.innerHTML = ''
        init(val)
    }
    // componentWillMount(){
    //   this.setState({data})
    // }
    componentDidMount() {

        init(1)
    }
    render() {
        let { data } = this.props;
        //    console.log(this.props,"this.props")
        return <div className="AnalyticCenterMap" style={{ width: "100%", height: "100%" }}>
            <ul id="loop" className="loop">
                <li id="e0" className="li1 ">
                    <CircleContent data={data[0]} />
                    {/* <div className="rotate "></div> */}
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>
                <li id="e1" className="li2">
                    <CircleContent data={data[1]} />
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>
                <li id="e2" className="li3">
                    <CircleContent data={data[3]} />
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>
                <li id="e3" className="li4">
                    <CircleContent data={data[2]} />
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>
                <li id="e4" className="li5">
                    <CircleContent data={data[4]} />
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>
                <li id="e5" className="li6 active">
                    <CircleContent data={data[5]} />
                    {
                        CircleCenterBackgroundFn()
                    }
                </li>

            </ul>
        </div>
    }
}

class CircleCenter extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            viewWidth: "80px",
            selfAdaption: 2432
        }
    }
    componentDidMount() {
        let that = this;


    }
    componentWillUnmount() {
        clearIntervalFn()
    }
    render() {
        const { data } = this.props;
        return <div className="CircleCenter" >
            <CircleLoop data={this.props.data.data} />
        </div>
    }
}

export default CircleCenter